<script setup>
// App 根组件：负责全局布局（头部导航 + 内容区）
</script>

<template>
  <div class="layout">
    <header class="header">
      <h1 class="brand">Vue 博客示例</h1>
      <nav class="menu">
        <router-link to="/" class="menu-link">首页</router-link>
        <router-link to="/posts" class="menu-link">文章</router-link>
        <router-link to="/about" class="menu-link">关于</router-link>
      </nav>
    </header>

    <!-- 内容区域：由路由决定具体显示哪个页面 -->
    <main class="content">
      <router-view />
    </main>

    <footer class="footer">© 2025 My Blog · 用心学习，持续输出</footer>
  </div>
</template>

<style scoped>
.layout { max-width: 860px; margin: 0 auto; }
.header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand { font-size: 20px; margin: 0; }
.menu { display: flex; gap: 12px; }
.menu-link { color: #333; text-decoration: none; }
.menu-link.router-link-active { color: #42b883; }
.content { min-height: 60vh; padding: 16px 0; }
.footer { color: #999; font-size: 12px; padding: 12px 0; border-top: 1px solid #eee; }
</style>
